<template>
	<view class="Page">
		<view class="title">已扫码列表</view>
		<view class="noData" v-show="list.length==0">当前无扫码数据</view>
		<view v-show="list.length!=0" class="is_show_box">
			<view>
				<view class="data_item" v-for="(item ,i) in list" :key="i">

						<view class="card-left">
							<view><text class="gray">物料名称：</text>{{item.spare_manage__name}}</view>
							<view><text class="gray">物料编码：</text>{{item.spare_manage__code}}</view>
							<view style="font-weight:600 ;">领用数量({{item.spare_manage__unit__name}})：<text style="color: red;"> {{item.num}}</text><image class="num-icon" src="../../static/num_update.svg" @click="num_update(item)"></image></view>
							<view><text class="gray">规格：</text>{{item.spare_manage__specs}}</view>
							<view><text class="gray">型号：</text>{{item.spare_manage__model}}</view>
							<view><text class="gray">备件状态：</text>{{item.now_spare_status__name }} {{' '}}<text class="gray">流水号：</text>{{item.no}}</view>
							<view><text class="gray">库存属性：</text>{{item.store_status}}</view>
							<view><text class="gray">仓库：</text>{{item.store_place__storage__name}}</view>
							<view><text class="gray">库存位置：</text>{{item.store_place__flag}}</view>
						</view>
						<button size="mini" type="warn" @click="delete_fun(i)" style="font-size: 14px;">删除</button>
				</view>
				
				
			</view>	

		</view>
		<view class="title">备注(必填)</view>
		<textarea placeholder="请输入备注" v-model="bz" class="textarea"></textarea>
		<uni-popup ref="receive_popup" type="dialog" >
			<view class="dialog_center">
				<uni-popup-dialog 
					mode="input" 
					message="成功消息" 
					:duration="2000" 
					:before-close="true" 
					@close="reclose_close" 
					@confirm="reclose_confirm" 
					title="领用" 
					placeholder="请输入领用数量"
					:value="num">
				</uni-popup-dialog>
			</view>
			
		</uni-popup>
		<uni-popup ref="piliangReceive" type="dialog">
			<uni-popup-dialog type="success" cancelText="取消" confirmText="确定" title="通知" content="是否确定领料" @confirm="piliangReceiveConfirm"
				@close="dialogClose"></uni-popup-dialog>
		</uni-popup>
		<view class="kongbai">
			
		</view>


	</view>
	<view class="buttonBox">
		<button size="default" type="primary"  @click="receive">领用</button>
		<button size="default" type="default"  @click="scan1" class="scanButton">扫码</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				id:123,
				// is_show:false,
				code:1234,
				// 二维码查询出的码
				qr_code:"",
				change_e:'',
				list:[],
				return_data:[],
				org_id:34,
				// 用于确认修改的是哪个的领用数量
				num:0,
				index:0,
				isScan:false,
				bz:'',
			}
		},
		computed:{
			getNowFormatDate() {
			  let date = new Date(),
			    year = date.getFullYear(), //获取完整的年份(4位)
			    month = date.getMonth() + 1, //获取当前月份(0-11,0代表1月)
			    strDate = date.getDate() // 获取当前日(1-31)
			  if (month < 10) month = `0${month}` // 如果月份是个位数，在前面补0
			  if (strDate < 10) strDate = `0${strDate}` // 如果日是个位数，在前面补0
			 
			  return `${year}-${month}-${strDate}`
			}
		},
		onLoad() {
			this.scan1();
		},
		methods: {
			scan1(){

				let that=this;
				uni.scanCode({
					scanType: ['qrCode'],
					success: function (res) {
						console.log(res.result)
						let strArray=res.result.split(',')
						console.log(strArray)
						if(strArray[0][5]!='d'){
							console.log('扫的码不正确')
							// that.$refs.mabucunzai.open('center')
							that.$root.message('fail','扫的码不是本系统的码')
						}
						else{
							console.log('扫的码正确')
							that.qr_code=strArray[0].slice(12);
							that.org_id=strArray[2].slice(7);
							console.log(that.qr_code);
							console.log(that.org_id);

							that.$root.http('http://113.15.231.21:180/storage_manage2/ding_app/query_spare_device_list',
								{
									org_id:that.org_id, 
									ids:that.qr_code
								}, 
								{
								  	sessionid:that.$root.sessionID
								})
								.then((res) => {
									console.log("处理响应数据");
									console.log(res);
									//处理响应数据
									
									console.log("that.isScan "+that.isScan);
									let scanFuntion=function(){
										if(res.data.result&&res.data.result.list&&res.data.result.list.length>0){
											console.log("存在");
											console.log(res.data.result.list[0]);
											
											// 判断是否支持领料
											if(res.data.result.list[0]?.num > 0
											&& res.data.result.list[0]?.now_spare_status__flag != 'dai_xiu'
											&& res.data.result.list[0]?.now_spare_status__flag != 'bao_fei'
											&& res.data.result.list[0]?.store_status == 'store'){
												
												that.list.push(res.data.result.list[0]);
												// 返回服务端的数组
												
												that.return_data.push({
													spare_status_flag: res.data.result.list[0]?.now_spare_status__flag? res.data.result.list[0]?.now_spare_status__flag : 'new', // 库存状态
													spare_device_id: res.data.result.list[0].id,      // 流水码ID（单个实物ID）
													num: res.data.result.list[0].num,                  // 领料数量
												})
												console.log("r1");
												console.log(that.return_data);
												// 获取的去重
												let map = new Map();
												for (let item of that.list) {
													map.set(item.id, item);
												 }
												that.list = [...map.values()];
												console.log("c2");
												console.log(that.list);
												// 返回的去重
												let map1 = new Map();
												for (let item of that.return_data) {
													map1.set(item.spare_device_id, item);
												 }
												that.return_data = [...map1.values()];
											}
											else{
												that.$root.message('fail','该物料不支持领用')
											}
											
	
										}
										else{
											console.log("不存在");
											// that.$refs.idbucunzai.open('center')
											that.$root.message('fail','扫的码id不存在')
										}
									}
									that.$root.judge(res,scanFuntion);
								})
						}

					}
				});	
				
			},
			delete_fun(i){
				this.list.splice(i, 1);
				this.return_data.splice(i, 1);
				console.log('删除后的')
				console.log(this.return_data);

			},
			num_update(item){
				// console.log('num',num)
				this.num=item.num;
				this.index=item.id;
				this.$refs.receive_popup.open('center')
				console.log('num'+this.num)
			},
			receive(){
				// 有领用列表才能领用
				if(this.return_data.length>0&&this.list.length>0){
					if(this.bz){
						this.$refs.piliangReceive.open('center')
					}
					else{
						this.$root.message('fail','备注为空，请输入备注')
					}
				}
				else{
					that.$root.message('fail','请先扫码添加需领用物料')
				}
			},
			reclose_close() {
				this.$refs.receive_popup.close();
			},
			reclose_confirm(num) {
				// 输入框的值
				console.log(num)
				if(this.num-num>=0){
					this.list.forEach((item)=>{
						if(item.id == this.index){
							item.num = num;
						}
					})
					this.return_data.forEach((item)=>{
						if(item.spare_device_id == this.index){
							item.num = num;
						}
					})
					console.log(this.return_data);
				}
				else{
					that.$root.message('fail','领用数量超过库存数量报错,请重新填写领用数量')
				}
				this.$refs.receive_popup.close();
				
			},
			piliangReceiveConfirm(){
				let that=this;

				that.$root.http('http://113.15.231.21:180/storage_manage2/ding_app/create_spare_record_by_normal',
					{
						org_id:34,               // 组织ID
						record_type_flag: 'ling_yong',   // 业务类型，这里写死
					   // store_place_id:7787,       // 物料当前库位ID
						date:that.getNowFormatDate,        // 领用时间，默认当天
						data:JSON.stringify(that.return_data),
						bz:that.bz
					}, 
					{
					  	sessionid:that.$root.sessionID
					})
					.then((res) => {
						let receiveConfirmFuntion=function(){
							that.list=[];
							that.return_data=[];
							that.bz='';
						}
						that.$root.judge(res,receiveConfirmFuntion);
					})
			}

		}
	}
</script>

<style scoped>
	.Page{
		width: 100%;
		font-size: 14px;
 		background-color: #F6F6F6;
		display: flex;
		flex-direction: column;
		padding-left: 10px;
		
	}
	.title{
		font-size: 16px;
		margin-top: 10px;
		font-weight: 600;
		border-left: 2px solid dodgerblue;
		padding-left: 8px ;
	}
	.noData{
		margin-top: 15px;
	}
	

	.data_item{
		margin-top: 12px;
		width: 90%;
		background-color: white;
		border-radius: 5px;
		font-size: 14px;
		padding-left: 10px;
		padding-bottom: 5px;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		
	}
	.card-left view{
		margin-top: 5px;
	}
	.gray{
		color: #93A1A1;
	}
	.num-icon{
		width: 16px;
		height: 16px;
	}
	.dialog_center{
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
	}
	.is_show_box{
		width: 100%;
	}
	.kongbai{
		width: 100%;
		height: 60px;
	}
	.buttonBox{
		width: 100%;
		position: fixed;
		bottom: 0%;
		display: flex;
		flex-direction: row;
		justify-content: space-around;
		align-items: center;
	}
	.buttonBox button{
		width: 50%;
	}
	.scanButton{
		background-color: #42B983;
		color: white;
		border: 1px solid #42B983;
	}
	.textarea{
		width: 90%;
		margin-top: 10px;
		font-size: 14px;
	}
</style>
